<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="../js/vue.js"></script>
		<title></title>
		<!-- 
			几个注意点:
				1.关于组件名:
					一个单词组成:
						第一种写法(首字母小写):school
						第二种写法(首字母大写):school
					多个单词组成:
						第一种写法(kebab-case命名):my-school
						第二种写法(Camelcase命名):MySchool(需要Vue脚手架支持)
						
				备注:
						(1).组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。
						(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
						
				2.关于组件标签:
					第一种写法:<school></school>
					第二种写法:<school/>
					
					备注:不用使用脚手架时，<schoo1/>会导致后续组件不能染。
				
				3.一个简写方式:
					const school =Vue.extend(options)可简写为:const school = options
		 -->
	</head>
	<body>
		<div id="root">
			<school></school>
			<hr />
		</div>
		<script type="text/javascript">
			
			const school = Vue.extend({
				name:"SchoolName", //指定name配置项；
				template:`
					<div>
						<h1>{{name}}</h1>
						<h1>{{name}}</h1>
					</div>
				`,
				data(){
					return {
						name:"蚂蚁"
					}
				}
			})
			
			const vm = new Vue({
				el:"#root",
				components:{
					school
				}
			})
		</script>
	</body>
</html>